<template>
  <div class="list">
    <layout>
      <template #top>
        <div class="set_left_header drag">
          <span>设置</span>
        </div>
      </template>
      <template #left>
        <template v-for="item in optionStore.settingTabbar" :key="item.id">
          <optionItem
            :title="item.title"
            :icon="item.icon"
            :path="item.path"
            :bgc="item.bgc"
            :is-active="item.path === currentRooutePath ? true : false"
            @click="pathHandle(item.path)"
          ></optionItem>
        </template>
      </template>
      <template #right>
        <router-view></router-view>
      </template>
    </layout>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

import layout from '@renderer/components/layout.vue'
import optionItem from '@renderer/components/option-item.vue'

import useOptions from '@renderer/pinai/modules/options'

const optionStore = useOptions()
const router = useRouter()
const route = useRoute()

const currentRooutePath = ref(route.path) // 当前路由路径

// 点击选项跳转路由
const pathHandle = (path: string) => {
  router.push(path)
  currentRooutePath.value = path
}
</script>

<style lang="scss" scoped>
.list {
  .set_left_header {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
  }
}
</style>
